<template>
  <d2-container class="page">
    <el-row>
      <el-col
        style="padding-left: 5px; padding-right: 5px; margin-bottom: 10px;"
        :xs="24"
        :sm="24"
        :md="10"
        :lg="11"
        :xl="11"
      >
        <el-card>
          <el-row>
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
              <el-form-item>
                <el-input v-model="searchInfo.name" placeholder="名称" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="searchInfo.type" placeholder="类型" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  plain
                  size="medium"
                  @click="handleDictCurrentChange(1)"
                  icon="fa fa-search"
                >查询</el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row>
            <el-row :gutter="2">
              <div class="avue-crud__menu">
                <div class="avue-crud__left">
                  <button
                    type="button"
                    class="el-button filter-item el-button--success el-button--mini"
                    @click="handlerAddNewDict"
                  >
                    <i class="fa fa-plus"></i>
                    <span>新增</span>
                  </button>
                  <button
                    type="button"
                    class="el-button filter-item el-button--primary el-button--mini"
                    @click="handlerDictEdit"
                  >
                    <i class="fa fa-edit"></i>
                    <span>修改</span>
                  </button>
                  <button
                    type="button"
                    class="el-button filter-item el-button--danger el-button--mini"
                    @click="handlerDictRemove"
                  >
                    <i class="fa fa-remove"></i>
                    <span>删除</span>
                  </button>
                  <button
                    class="el-button filter-item el-button--info el-button--mini"
                    style="padding:0 0 0 0px"
                  >
                    <el-upload
                      ref="upload"
                      action
                      :limit="1"
                      :show-file-list="false"
                      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                    >
                      <button class="el-button filter-item el-button--info el-button--mini">
                        <i class="fa fa-upload"></i>
                        <span>导入</span>
                      </button>
                    </el-upload>
                  </button>
                  <button
                    type="button"
                    class="el-button filter-item el-button--warning el-button--mini"
                  >
                    <i class="fa fa-download"></i>
                    <span>导出</span>
                  </button>
                </div>
                <div class="avue-crud__right">
                  <button
                    type="button"
                    class="el-button el-tooltip el-button--default el-button--small is-circle"
                    aria-describedby="el-tooltip-2497"
                    tabindex="0"
                    @click="getDictPage"
                    title="刷新"
                  >
                    <i class="el-icon-refresh"></i>
                  </button>
                </div>
              </div>
              <el-col :xs="10">
                <el-table
                  v-loading="dictLoading"
                  :data="dictDataList"
                  style="width: 100%;"
                  ref="dictListRef"
                  border
                  :fit="true"
                  highlight-current-row
                  :header-cell-style="{'text-align':'center'}"
                  @row-click="dictRoleTableRowClick"
                >
                  <el-table-column
                    sortable
                    resizable
                    :show-overflow-tooltip="true"
                    align="center"
                    type="selection"
                  ></el-table-column>
                  <el-table-column
                    prop="name"
                    label="名称"
                    sortable
                    resizable
                    :show-overflow-tooltip="true"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="type"
                    label="类型"
                    sortable
                    resizable
                    :show-overflow-tooltip="true"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="description"
                    label="备注"
                    sortable
                    resizable
                    :show-overflow-tooltip="true"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    label="操作"
                    sortable
                    resizable
                    :show-overflow-tooltip="true"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <el-button
                        title="修改"
                        @click="handlerDictUpdate(scope.row)"
                        type="primary"
                        icon="fa fa-pencil"
                        size="mini"
                      ></el-button>
                      <el-button
                        title="删除"
                        @click="handlerDictDelete(scope.row)"
                        type="danger"
                        icon="fa fa-trash"
                        size="mini"
                      ></el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  align="left"
                  @size-change="handleDictSizeChange"
                  @current-change="handleDictCurrentChange"
                  :current-page="searchInfo.pageNumber"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="searchInfo.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="searchInfo.total"
                ></el-pagination>
              </el-col>
            </el-row>
          </el-row>
        </el-card>
      </el-col>
      <el-col
        style="padding-left: 5px; padding-right: 5px;"
        :xs="24"
        :sm="24"
        :md="14"
        :lg="13"
        :xl="13"
      >
        <el-card>
          <div slot="header" class="clearfix">
            <span>字典项列表</span>
            <el-button
              style="float: right; padding: 4px 10px;"
              icon="el-icon-plus"
              type="primary"
              :disabled="!ifAddEntry"
              @click="handlerEntryAddNew"
            >新增</el-button>
          </div>
          <el-table
            v-loading="dictEntryLoading"
            :data="entryDataList"
            style="width: 100%;"
            ref="dictEntryListRef"
            border
            :fit="true"
            highlight-current-row
            :header-cell-style="{'text-align':'center'}"
          >
            <el-table-column
              prop="name"
              label="名称"
              sortable
              resizable
              :show-overflow-tooltip="true"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="value"
              label="值"
              sortable
              resizable
              :show-overflow-tooltip="true"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="sort"
              label="排序"
              sortable
              resizable
              :show-overflow-tooltip="true"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="description"
              label="备注"
              sortable
              resizable
              :show-overflow-tooltip="true"
              align="center"
            ></el-table-column>
            <el-table-column
              label="操作"
              sortable
              resizable
              :show-overflow-tooltip="true"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  title="修改"
                  @click="handlerEntryUpdate(scope.row)"
                  type="primary"
                  icon="fa fa-pencil"
                  size="mini"
                ></el-button>
                <el-button
                  title="删除"
                  @click="handlerEntryDelete(scope.row)"
                  type="danger"
                  icon="fa fa-trash"
                  size="mini"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            align="left"
            @size-change="handleDictEntrySizeChange"
            @current-change="handleDictEntryCurrentChange"
            :current-page="searchEntryInfo.pageNumber"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchEntryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchEntryInfo.total"
          ></el-pagination>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      title="字典信息"
      :before-close="handleDictDialogClose"
      :visible.sync="dictDialogTableVisible"
      :destroy-on-close="!dictDialogTableVisible"
    >
      <el-form
        label-width="auto"
        :model="dictInfo"
        :label-position="position"
        ref="dictForm"
        required-asterisk
        :rules="dictRules"
        center
      >
        <el-form-item required label="名称" prop="name">
          <el-input v-model="dictInfo.name" clearable></el-input>
        </el-form-item>
        <el-form-item required label="类型" prop="type">
          <el-input v-model="dictInfo.type" clearable></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="description">
          <el-input type="textarea" v-model="dictInfo.description" placeholder="备注" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlerDictSave" size="medium">保存</el-button>
        <el-button size="medium" @click="handleDictDialogClose">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="字典项信息"
      :before-close="handleDictEntryDialogClose"
      :visible.sync="dictEntryDialogTableVisible"
      :destroy-on-close="!dictEntryDialogTableVisible"
    >
      <el-form
        label-width="auto"
        :model="dictEntryInfo"
        :label-position="position"
        ref="dictEntryForm"
        required-asterisk
        :rules="dictEntryRules"
        center
      >
        <el-form-item label="字典" prop="dictId">
          <el-input :disabled="true" v-model="currentRowDictData.name" clearable></el-input>
        </el-form-item>
        <el-form-item required label="名称" prop="name">
          <el-input v-model="dictEntryInfo.name" clearable></el-input>
        </el-form-item>
        <el-form-item required label="值" prop="value">
          <el-input v-model="dictEntryInfo.value" clearable></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input-number
            style="width: 100%"
            controls-position="right"
            v-model="dictEntryInfo.sort"
            placeholder="排序"
            clearable
          ></el-input-number>
        </el-form-item>
         <el-form-item label="备注" prop="description">
          <el-input type="textarea" v-model="dictEntryInfo.description" placeholder="备注" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlerEntrySave" size="medium">保存</el-button>
        <el-button size="medium" @click="handleDictEntryDialogClose">取消</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
import { mapActions } from 'vuex'
import { MessageBox } from 'element-ui'
export default {
  data () {
    return {
      dictLoading: true,
      dictEntryLoading: false,
      // 字典检索
      searchInfo: {
        name: '',
        type: '',
        pageSize: 10,
        pageNumber: 1,
        total: 0,
        sortColumn: [],
        groupColumn: []
      },
      // 字典列表
      dictDataList: [],
      // 字典信息
      dictInfo: {
        id: '',
        name: '',
        type: '',
        description: ''
      },
      dictRules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        type: [{ required: true, message: '请输入类型', trigger: 'blur' }]
      },
      position: 'left',
      dictDialogTableVisible: false,
      isDictUpdate: false,
      currentRowDictData: {},
      ifAddEntry: false,
      /// /分录
      searchEntryInfo: {
        dictId: '',
        pageSize: 10,
        pageNumber: 1,
        total: 0,
        sortColumn: [],
        groupColumn: []
      },
      // 分录列表
      entryDataList: [],
      dictEntryDialogTableVisible: false,
      dictEntryInfo: {
        id: '',
        dictId: '',
        name: '',
        value: '',
        sort: 999,
        description: ''
      },
      dictEntryRules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        value: [{ required: true, message: '请输入值', trigger: 'blur' }]
      },
      isEntryUpdate: false
    }
  },
  mounted () {
    const _self = this
    _self.getDictPage()
  },
  methods: {
    ...mapActions('d2admin/dict', [
      'dictSave',
      'dictUpdate',
      'dictDelete',
      'dictPage',
      'set'
    ]),
    ...mapActions('d2admin/dictEntry', [
      'dictEntrySave',
      'dictEntryUpdate',
      'dictEntryDelete',
      'dictEntryPage'
    ]),
    getDictPage () {
      const _self = this
      _self.dictLoading = true
      const params = JSON.parse(JSON.stringify(_self.searchInfo))
      _self.dictPage({ data: params }).then((result) => {
        _self.dictDataList = result.records.list
        _self.searchInfo.total = Number(result.records.total)
        _self.dictLoading = false
      })
    },
    handleDictSizeChange (pageSize) {
      const _self = this
      _self.searchInfo.pageSize = pageSize
      _self.getDictPage()
    },
    handleDictCurrentChange (pageNumber) {
      const _self = this
      _self.searchInfo.pageNumber = pageNumber
      _self.getDictPage()
    },
    /**
     * 关闭弹窗
     */
    handleDictDialogClose () {
      const _self = this
      _self.dictDialogTableVisible = false
      _self.initDictInfo()
      _self.getDictPage()
      _self.set()
    },
    /**
     * 初始字典信息
     */
    initDictInfo () {
      const _self = this
      _self.dictInfo = {
        id: '',
        name: '',
        type: '',
        description: ''
      }
    },
    /**
     * 新增字典
     */
    handlerAddNewDict () {
      const _self = this
      _self.initDictInfo()
      _self.isDictUpdate = false
      _self.dictDialogTableVisible = true
      _self.getDictPage()
    },
    /**
     * 保存
     */
    handlerDictSave () {
      const _self = this
      _self.$refs.dictForm.validate((valid) => {
        if (valid) {
          if (_self.isDictUpdate) {
            _self.updateDict()
          } else {
            _self.saveDict()
          }
        } else {
          this.$message.error('表单校验失败，请检查')
        }
      })
    },
    updateDict () {
      const _self = this
      const params = JSON.parse(JSON.stringify(_self.dictInfo))
      console.log(_self.dictInfo)
      _self.dictUpdate({ data: params }).then((result) => {
        _self.$message.success('修改成功')
        _self.handleDictDialogClose()
      })
    },
    saveDict () {
      const _self = this
      const params = JSON.parse(JSON.stringify(_self.dictInfo))
      _self.dictSave({ data: params }).then((result) => {
        _self.$message.success('保存成功')
        _self.handleDictDialogClose()
      })
    },
    /**
     * 修改
     */
    handlerDictUpdate (row) {
      const _self = this
      _self.initDictInfo()
      _self.dictInfo = JSON.parse(JSON.stringify(row))
      _self.isDictUpdate = true
      _self.dictDialogTableVisible = true
    },
    /**
     * 修改
     */
    handlerDictEdit () {
      const _self = this
      const info = _self.$refs.dictListRef.selection
      if (info.length <= 0) {
        _self.$message({
          message: '请选择',
          type: 'warning'
        })
      } else if (info.length > 1) {
        _self.$message({
          message: '请选择(有且只有一个)',
          type: 'warning'
        })
      } else {
        _self.isDictUpdate = true
        _self.initDictInfo()
        _self.dictInfo = JSON.parse(JSON.stringify(info[0]))
        _self.dictDialogTableVisible = true
      }
    },
    /**
     * 删除
     */
    handlerDictDelete (row) {
      const _self = this
      // const info = JSON.parse(JSON.stringify(row))
      MessageBox.confirm('此操作将永久删除字典, 是否继续?', '删除', {
        type: 'warning'
      }).then(() => {
        const ids = []
        ids.push(row.id)
        _self.deleteDict(ids)
      })
      // .catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   })
      // })
    },
    handlerDictRemove () {
      const _self = this
      const info = _self.$refs.dictListRef.selection
      if (info.length > 0) {
        MessageBox.confirm('此操作将永久删除字典, 是否继续?', '删除', {
          type: 'warning'
        }).then(() => {
          const ids = []
          info.forEach((item) => {
            ids.push(item.id)
          })
          _self.deleteDict(ids)
        })
        // .catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消删除'
        //   })
        // })
      } else {
        _self.$message({
          message: '请选择',
          type: 'warning'
        })
      }
    },
    deleteDict (ids) {
      const _self = this
      if (ids.length > 0) {
        const params = JSON.parse(JSON.stringify(ids))
        _self.dictDelete({ data: { ids: params } }).then((result) => {
          _self.$message.success('删除成功')
          _self.handleDictDialogClose()
        })
      }
    },
    /**
     * 表格点击
     */
    dictRoleTableRowClick (row, column, cell, event) {
      const _self = this
      _self.currentRowDictData = JSON.parse(JSON.stringify(row))
      _self.searchEntryInfo.pageNumber = 1
      _self.ifAddEntry = true
      _self.getDictEntryPage()
    },
    isNull (data) {
      if (data) {
        return true
      } else {
        return false
      }
    },
    // 关闭分录弹窗
    handleDictEntryDialogClose () {
      const _self = this
      // _self.$refs.dictEntryForm.resetFields()
      _self.dictEntryDialogTableVisible = false
      _self.initEntry()
      _self.getDictEntryPage()
      _self.set()
    },
    /**
     * 分录分页
     */
    getDictEntryPage () {
      const _self = this
      const info = _self.currentRowDictData
      if (info) {
        _self.searchEntryInfo.dictId = info.id
      }
      const params = JSON.parse(JSON.stringify(_self.searchEntryInfo))
      _self.dictEntryLoading = true
      _self.dictEntryPage({ data: params }).then((result) => {
        _self.entryDataList = result.records.list
        _self.searchEntryInfo.total = Number(result.records.total)
        _self.dictEntryLoading = false
      })
    },
    initEntry () {
      const _self = this
      _self.dictEntryInfo = {
        id: '',
        dictId: _self.currentRowDictData.id,
        name: '',
        value: '',
        sort: 999,
        description: ''
      }
    },
    /**
     * 分录新增
     */
    handlerEntryAddNew () {
      const _self = this
      _self.isEntryUpdate = false
      _self.initEntry()
      _self.dictEntryDialogTableVisible = true
    },
    /**
     * 新增
     */
    handlerEntrySave () {
      const _self = this
      if (!_self.currentRowDictData) {
        _self.$message.warning('请选择父项之后新增')
        return
      }
      _self.$refs.dictEntryForm.validate((valid) => {
        if (valid) {
          if (_self.isEntryUpdate) {
            _self.updateDictEntry()
          } else {
            _self.saveDictEntry()
          }
        } else {
          this.$message.error('表单校验失败，请检查')
        }
      })
    },
    updateDictEntry () {
      const _self = this
      const params = JSON.parse(JSON.stringify(_self.dictEntryInfo))
      _self.dictEntryUpdate({ data: params }).then((result) => {
        _self.$message.success('修改成功')
        _self.handleDictEntryDialogClose()
      })
    },
    saveDictEntry () {
      const _self = this
      const params = JSON.parse(JSON.stringify(_self.dictEntryInfo))
      params.dictId = _self.currentRowDictData.id
      _self.dictEntrySave({ data: params }).then((result) => {
        _self.$message.success('保存成功')
        _self.handleDictEntryDialogClose()
      })
    },
    /**
     * 修改
     */
    handlerEntryUpdate (row) {
      const _self = this
      _self.isEntryUpdate = true
      _self.dictEntryInfo = JSON.parse(JSON.stringify(row))
      _self.dictEntryDialogTableVisible = true
    },
    /**
     * 删除
     */
    handlerEntryDelete (row) {
      const _self = this
      const info = JSON.parse(JSON.stringify(row))
      MessageBox.confirm('此操作将永久删除字典项, 是否继续?', '删除', {
        type: 'warning'
      }).then(() => {
        const ids = []
        ids.push(info.id)
        _self.deleteEntry(ids)
      })
      // .catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   })
      // })
    },
    deleteEntry (ids) {
      const _self = this
      if (ids.length > 0) {
        const params = JSON.parse(JSON.stringify(ids))
        _self.dictEntryDelete({ data: { ids: params } }).then((result) => {
          _self.$message.success('删除成功')
          _self.handleDictEntryDialogClose()
        })
      }
    },
    handleDictEntrySizeChange (pageSie) {
      const _self = this
      _self.searchEntryInfo.pageSize = pageSie
      _self.getDictEntryPage()
    },
    handleDictEntryCurrentChange (pageNumber) {
      const _self = this
      _self.searchEntryInfo.pageNumber = pageNumber
      _self.getDictEntryPage()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table__body tr.current-row > td {
  background-color: #e8f4ff;
}
</style>
